<template>
  <div class="goodListDiv">
    <div class="listDiv">
      <InputSearchCom></InputSearchCom>
      <el-table :data="tableData" stripe style="width: 100%" :border="true">
        <el-table-column prop="num" label="" width="60"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="1000">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="100">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="100">
        </el-table-column>
        <el-table-column prop="upd_time" label="创建时间" width="170">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <el-button type="primary" size="medium">编辑</el-button>
          <el-button type="danger" size="medium" @click="onDelete"
            >删除</el-button
          >
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[2, 10, 20, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="200"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import InputSearchCom from "./InputSearchCom.vue";
import user from "@/api/user";
export default {
  name: "goodListDiv",
  data() {
    return {
      tableData: [],
      pagenum: 1,
      pageSize: 10,
    };
  },
  methods: {
    onDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      let _this = this;
      let obj = {
        pagenum: this.pagenum,
        pagesize: val,
      };
      user.getCategories(obj).then((res) => {
        _this.tableData = res.data.data.goods;
      });
    },
    handleCurrentChange(val) {
      let _this = this;
      this.pagenum = val;
      let obj = {
        pagenum: val,
        pagesize: _this.pageSize,
      };
      user.getCategories(obj).then((res) => {
        _this.tableData = res.data.data.goods;
      });
    },
  },
  mounted() {
    let _this = this;
    this.bus.$on("arrlist", (res) => {
      _this.tableData = res;
    });
    let obj = {
      pagenum: _this.pagenum,
      pagesize: _this.pageSize,
    };
    user.getCategories(obj).then((res) => {
      _this.tableData = res.data.data.goods;
    });
  },
  components: { InputSearchCom },
};
</script>

<style>
.goodListDiv {
  padding: 15px;
  box-sizing: border-box;
  width: calc(100vw - 210px);
  height: calc(100vh - 180px);
  overflow-y: scroll;
}
.listDiv {
  box-shadow: 1px 1px 5px 1px rgba(113, 113, 113, 0.25);
  padding: 10px;
  box-sizing: border-box;
}
</style>